<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>相书保险</title>
    <link rel="stylesheet" href="css/project.css">
    <script src="js/libs/jquery-3.0.0.min.js"></script>
    <script src="js/libs/jquery-weui.min.js"></script>
    <script src="js/libs/vue2.0.js"></script>
    <script src="js/project.js"></script>
    <style>
        body{background-color: #f2f3f8;padding-top: 45px;}

        .accordion{margin-top: 10px;}
        /* checkbox */
        .weui_cells_checkbox.weui_cells:after{display: none;}

        /* 可点击链接 */
        .s-link{  font-size:15px;color: #007de2;text-decoration: underline;  }
		table{  width:100%;  }
        tr{  border: 0;  }
        th{  min-width: 60px;  max-width: 70px;  }
        td{text-align: center;}
        tr th{text-align: left;padding: 0 5px;}
    </style>
</head>
<body>
<div id="app">

    <!-- 头部 -->
    <header class="fixed_top">
        <div class="header_left back">
            <i class="iconfont icon-back"></i>
        </div>
        <div class="header_title">保单信息确认</div>
    </header>

    <!--<div style="font-size: 20px;color: #333;line-height: 65px;text-align: center;">
        一年综合意外险
    </div>-->

    <!-- 手风琴 -->
    <ul id="accordion" class="accordion">
        <li class="dropdown show">
            <div data-toggle="dropdown">投保信息<i class="iconfont icon-fangxiangshang"></i></div>
            <div class="dropdown-menu">
                <div class="weui_cells ">
                    <a :href="'fillInformation.html?orderId='+order.id" class="s-link" style="z-index:1;position:absolute;right:15px;top:15px;">修改信息</a>
                    <div class="weui_cell">
                        <div class="weui_cell_hd">保险起期:</div>
                        <div class="weui_cell_bd weui_cell_primary">{{order.effectiveDateYMD}}</div>
                    </div>
                    <div class="weui_cell">
                        <div class="weui_cell_hd">保险止期:</div>
                        <div class="weui_cell_bd weui_cell_primary">{{order.expiryDateYMD}}</div>
                    </div>
                    <div class="weui_cell border-bottom ">
                        <div class="weui_cell_hd">保期:</div>
                        <div class="weui_cell_bd weui_cell_primary">{{order.policyDay+'天'}}</div>
                    </div>
                    <div class="weui_cell">
                        <div class="weui_cell_hd">被保人姓名:</div>
                        <div class="weui_cell_bd weui_cell_primary">{{order.insurantName}}</div>
                    </div>
                    <div class="weui_cell">
                        <div class="weui_cell_hd">性别:</div>
                        <div class="weui_cell_bd weui_cell_primary">{{transformSex(order.insurantGender)}}</div>
                    </div>

                    <div class="weui_cell">
                        <div class="weui_cell_hd">身份证号:</div>
                        <div class="weui_cell_bd weui_cell_primary">{{order.insurantCardNo}}</div>
                    </div>
                    <div class="weui_cell  ">
                        <div class="weui_cell_hd">出生日期:</div>
                        <div class="weui_cell_bd weui_cell_primary">{{order.insurantBirthday}}</div>
                    </div>
                    <div class="weui_cell">
                        <div class="weui_cell_hd">学校:</div>
                        <div class="weui_cell_bd weui_cell_primary">{{order.schoolName}}</div>
                    </div>
                    <div class="weui_cell border-bottom">
                        <div class="weui_cell_hd">班级:</div>
                        <div class="weui_cell_bd weui_cell_primary">{{order.gradeName}}年级({{order.className}})班</div>
                    </div>
                    <div class="weui_cell">
                        <div class="weui_cell_hd">投保人姓名:</div>
                        <div class="weui_cell_bd weui_cell_primary">{{order.holderName}}</div>
                    </div>
                    <div class="weui_cell">
                        <div class="weui_cell_hd">手机:</div>
                        <div class="weui_cell_bd weui_cell_primary">{{order.holderPhone}}</div>
                    </div>
                    <div class="weui_cell">
                        <div class="weui_cell_hd">身份证号:</div>
                        <div class="weui_cell_bd weui_cell_primary">{{order.holderCardno}}</div>
                    </div>
                </div>
            </div>
        </li>
       <li class="dropdown">
            <div data-toggle="dropdown">保障内容<i class="iconfont icon-fangxiangshang"></i></div>

            <div class="submenu dropdown-menu" >
                <div style="padding:20px 15px;">
                    <div v-if="order.productName == 'Z-100A'">
                        <img src="./images/table_03.png" alt="" width="100%">
                    </div>
                    <div v-else>
                        <img src="./images/table_04.png" alt="" width="100%">
                    </div>
                </div>

            </div>
        </li>
    </ul>

    <!-- checkbox -->
    <div class="weui_cells weui_cells_checkbox" style="margin-top:0;background-color: transparent; ">
        <div class="weui_cell weui_check_label" >
            <div class="weui_cell_hd" >
                <input type="checkbox" class="weui_check" name="checkbox1" id="s11" v-model="hasRead">
                <i class="weui_icon_checked_primary"></i>
            </div>
            <div class="weui_cell_bd weui_cell_primary">
                <p style="font-size: 15px;color: #333;"><label for="s11">我已阅读并同意</label><a href="introduce.html" class="s-link">产品介绍</a>及<a href="InsuranceInformation.html" class="s-link">投保须知</a>，同意投保</p>
            </div>
        </div>
    </div>

    <div style="font-size: 13px;color: #8a90af;text-align: center;margin: 30px 10px 0px;">保费<span style="font-size: 30px;color: #333;">￥{{order.premiumY}}</span></div>
    <!--<div style="font-size: 13px;color: #8a90af;text-align: center;">(保费计算公式):{{order.calculatingFormula}}</div>-->
    <a onclick="pay()" class="weui_btn" :class="{'disabled': !hasRead}" style="margin: 20px 15px;">立即支付</a>

</div>
<script>
    // 订单
    var vm = new Vue({
        el: '#app',
        data: function () {
            return {
                hasRead: false,
                order:{
                    id: '',
                    schoolName: '',
                    productId: '',
                    productName: '',
                    /* 保险产品 */
                    productName: "",
                    premiumY: 0,
                    effectiveDateYMD: "",
                    expiryDateYMD: "",
                    policyDay: "",
                    calculatingFormula: "",
                    /* 被保人 */
                    insurantName: '',
                    insurantGender: '',
                    insurantCardNo: '',
                    insuredClass: '',
                    gradeName:'',
                    className:'',
                    insurantBirthday: '',
                    /* 投保人 */
                    holderName: '',
                    holderPhone: '',
                    holderCardno: ''
                }
            }
        },
        methods: {},
        created: function () {
            orderId = getUrlParam('orderId');
            /* 获取订单 */
            var url = '/wego168-xsinsurance-wechat/order/confirmById.jsp'
            $.post(url,{orderId:orderId}, function (data) {
                data = JSON.parse(data);
                console.log(data);
                if(data.errcode == 0){
                    vm.order = data.order;
					$("#table_"+data.order.productName).show();
                }
            })
        }
    });

    /* 支付 */
    function pay() {
        if(!vm.hasRead){
            showInfo("请先勾选“我已阅读”");
            return false
        }
        // 订单支付状态
        var state = true ;
        //TODO:调用第三方支付接口

        if(state){
            // 更新订单
            updataOrder(vm.order.id);

        }else {
            $.alert('支付失败,请联系客服！', '温馨提示',function () {
            })
        }
    }

    /* 更新订单状态
    * @param  orderId [string]------订单id
    * */
    function updataOrder(orderId) {
        var url = '/wego168-xsinsurance-wechat/policy/underwrite.jsp';

        $.get(url,{orderId:orderId}, function (data) {
            data = JSON.parse(data);
            console.log(data);
            if(data.errcode == 0){
                window.location.href = data.url;
            }else if(data.errcode == -2){
				$.alert(data.errMsg, '温馨提示',function () {
					location.reload();
				});
			}else{
				$.alert(data.errMsg, '温馨提示',function () {
				});
			}
        })
    }

</script>

</body>
</html>